<form name="form" ng-init="vm.init();refresh(vm.callback);" novalidate>
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <div class="btn-group x-btn-list">
        <button class="btn btn-default" type="button" ng-disabled="form.$invalid || !vm.hasSql"
            ng-click="vm.mapping(form.$valid)"><i class="fa fa-map-o"></i> 映射</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
            ng-disabled="form.$invalid || !vm.hasSql">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><button type="button" class="btn btn-default btn-block"
              ng-click="vm.mapping(form.$valid, 'jpa')">JPA</button></li>
          <li><button type="button" class="btn btn-default btn-block"
              ng-click="vm.mapping(form.$valid, 'lombok')">Lombok</button></li>
          <li class="divider"></li>
          <li><button type="button" class="btn btn-default btn-block"
              ng-click="vm.mapping(form.$valid, 'jpa+lombok')">JPA+Lombok</button></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button id="copy" class="btn btn-default" type="button" ng-disabled="!vm.hasCode">
          <i class="fa fa-copy"></i> 复制</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
            ng-disabled="!vm.hasCode">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><button type="button" class="btn btn-default btn-block" ng-click="vm.save()">保存文件</button></li>
        </ul>
      </div>
      <button class="btn btn-default" type="button" ng-click="vm.reset()">
        <i class="fa fa-repeat"></i> 重置</button>
    </div>
  </script>
  <div class="row x-view-body" movezone="{ratio:-1}">
    <div class="col-md-6">
      <div class="x-view-scope">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">DAO</span>
            <input type="text" name="daoName" class="form-control" ng-model="vm.daoName" autofocus required
                placeholder="package.class" ng-class="{'x-invalid': form.$submitted && form.daoName.$invalid}">
            <span class="input-group-addon">.java</span>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">Model</span>
            <input type="text" name="modelName" class="form-control" ng-model="vm.modelName" required
                placeholder="package.class" ng-class="{'x-invalid': form.$submitted && form.modelName.$invalid}">
            <span class="input-group-addon">.java</span>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">Mapper</span>
            <input type="text" name="mapperName" class="form-control" ng-model="vm.mapperName" required
                ng-class="{'x-invalid': form.$submitted && form.mapperName.$invalid}">
            <span class="input-group-addon">.xml&nbsp;</span>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label">SQL与模板
            <font color="green" style="font-weight:normal">（类型标识符：{jdbcType:CHAR,javaType:String}）</font>
          </label>
          <uib-tabset active="0" type="tabs" class="x-mapper">
            <uib-tab index="0" heading="SQL">
              <div class="x-editor">
                <pre id="sql-editor"></pre>
              </div>
            </uib-tab>
            <uib-tab index="1" heading="DAO">
              <textarea name="daoTemplate" class="form-control" ng-model="vm.templates.dao" required
                  ng-class="{'x-invalid': form.$submitted && form.daoTemplate.$invalid}"></textarea>
            </uib-tab>
            <uib-tab index="2" heading="Model">
              <textarea name="modelTemplate" class="form-control" ng-model="vm.templates.model" required
                  ng-class="{'x-invalid': form.$submitted && form.modelTemplate.$invalid}"></textarea>
            </uib-tab>
            <uib-tab index="3" heading="Mapper">
              <textarea name="mapperTemplate" class="form-control" ng-model="vm.templates.mapper" required
                  ng-class="{'x-invalid': form.$submitted && form.mapperTemplate.$invalid}"></textarea>
            </uib-tab>
          </uib-tabset>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="x-view-scope">
        <div ng-show="vm.error == ''">
          <uib-tabset active="vm.activeTab" type="tabs" class="x-mapper">
            <uib-tab index="0" heading="DAO">
              <pre class="x-output" id="dao-viewer"></pre>
            </uib-tab>
            <uib-tab index="1" heading="Model">
              <pre class="x-output" id="model-viewer"></pre>
            </uib-tab>
            <uib-tab index="2" heading="Mapper">
              <pre class="x-output" id="mapper-viewer"></pre>
            </uib-tab>
          </uib-tabset>
        </div>
        <pre class="alert alert-danger" ng-if="vm.error">{{vm.error}}</pre>
      </div>
    </div>
  </div>
</form>
